<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <title>感动在我身边评选</title>
    <style>
        .container {
            height: auto;
            width: 95%;
            margin: 5px auto;
            padding: 0;
        }

        img {
            width: 100%;
        }

        .left {
            float: left;
        }

        .right {
            float: right;
        }

        .clearfix {
            both: clear;
        }

        .main-color {
            background-color: #d0002d;
        }

        .container .panel {
            width: 39%;
            border-radius: 8px;
            margin: 5px 2%;
            padding: 8px 8px;
            text-align: center;
            display: inline-block;
        }

        .container .panel:last-of-type {
            width: 70%;
            border-radius: 8px;
            margin: 5px 2%;
            padding: 8px 8px;
            text-align: center;
            display: block;
        }

        .container .panel span {
            line-height: 20px;
            font-size: 14px;
            color: white;
            /*text-decoration: underline;*/
            display: block;
        }

        .container .panel .side {
            width: 100%;
            border-radius: 5px;
            background-color: rgba(255, 255, 255, 0.3);
            /*padding: 3px 3px;*/
            box-shadow: white 2px 2px 10px;
            text-align: center;
        }

        .container .panel .side img {
            width: 100%;
            border-radius: 5px;
        }

        .container .panel button {
            width: auto;
            padding: 5px 10px;
            min-width: 70%;
            color: #000;
            background-color: #eee;
            border-radius: 5px;
            box-shadow: #aaa 2px 2px 10px;
            border: 0;
            font-size: 16px;
        }

        .container .panel button:focus,
        .container .panel button:active { /* hover、focus、active变化时的颜色 */
            box-shadow: inset 2px 2px 10px;
        }

        .no-margin {
            margin: 0;
        }

        .container .panel.with-bg-panel {
            width: 90%;
            padding: 15px;
            margin: 5px 5px;
            background-color: rgba(255, 255, 255, 0.4);
            color: white;
            text-align: left;
        }

        #user-item p, #intro p {
            text-indent: 2em; /*em是相对单位，2em即现在一个字大小的两倍*/
        }

        h3 {
            text-align: center;
        }
        .footer {
            width: 100%;
            height: 25px;
            text-align: center;
            font-size: 12px;
            color: #aaa;
        }
    </style>
</head>
<body class="main-color no-margin">
<img src="http://ww2.sinaimg.cn/mw690/69611997gw1f209yn2kg9j218g1124ha.jpg"/>

<div class="right"
     style="position: relative; margin-top: -30px; height: 40px; font-size: 14px; color: white; text-decoration: underline;z-index: 2; margin-right: 15px"
     onclick="clickintro()">投票公告
</div>
<div class="clearfix"></div>
<div id="user-list" style="margin-bottom: 30px; padding: 0;">
    <div class="container">
        <div style=" display: inline-block">
            <volist name="users" id="user">
                <div class="panel" onclick='showUser("{$i}", event)' id="user-{$user.id}">
                    <div class="side">
                        <img src="{$user.imgurl}">
                    </div>
                <span onclick="event.stopPropagation()" style="height: 50px">
                    <input type="checkbox" id="usercheck-{$user.id}" value="{$user.id}"/>
                    <label for="usercheck-{$user.id}" style="line-height: 25px">NO.{$i} {$user.name}
                        <span style="line-height: 20px">{$user.vote_count}票</span>
                    </label>
                    <br>
                </span>
                    <!--<span style="line-height: 20px">({$user.vote_count}票)</span>-->
                </div>
            </volist>
        </div>
    </div>
    <div class="footer" onclick="alert('业务有需请联系冯经理: 18630956414')">技术提供@咕噜科技 2016</div>

    <div style="position: fixed; bottom: 0; width: 100%; height: 50px; color: white; background-color:#f0c040; text-align: center"
         onclick="vote(event)">
        <span style="line-height: 50px">投票</span>
    </div>
</div>
<br>
<div class="container" id="intro" style="display: none">
    <div class="panel with-bg-panel">
        <h3>活动简介</h3>
        <p>
            为全面贯彻落实党的十八届五中全会、团的十七届五中全会和区委十届七次全会精神，大力选树和宣传我区青年中的先进典型，发挥优秀青年的示范带动作用，引导和激励广大青年自觉成为美丽津南建设的突击手和排头兵，经区委同意，团区委会同区委组织部、区委宣传部、区文明办、区委政法委、区农经委、区工业经委、区商务委、区科委、区教育局、区卫计委、区总工会、区妇联、区新闻中心、津南报社等单位联合主办津南区第三届“感动在我身边”优秀青年评选活动。</p>
        <h3>评选细则</h3>
        <p>理想信念坚定、事迹质朴感人，年龄在18-40周岁在津南工作、学习两年以上的各行业青年均可参加（已获得第一届、第二届“感动在我身边”优秀青年荣誉的不在本次评选推荐之列）。</p>
        <p>在人物推荐阶段，可通过组织推荐和个人自荐方式，时间截至到3月4日。</p>

        <h3>活动公告</h3>
        <p>经过各系统、各单位推荐提名，活动组委会办公室审核，评审委员会初选，共推选出27个事迹感人的优秀青年及集体作为本届“感动在我身边”侯选人进入到最终投票公示阶段。</p>

        <h3>投票规则</h3>
        <p>关注津南团区委微信公众号，每人每天最多可以投1票，每票最多选择10人。投票自3月18日10:00开始，截止时间为3月27日23:59。</p>
        <p>请尊重比赛规则,若发现有刷票者,取消参赛资格!</p>
    </div>
    <div class="footer" onclick="alert('业务有需请联系冯经理: 18630956414')">技术提供@咕噜科技 2016</div>

    <div style="position: fixed; right: 20px; bottom: 40px">
        <button style="border-width:0 ; background-color:#f0c040; font-size: 16px; border-radius: 5px; width: 90px; color: white" onclick="showHome()">返回
        </button>
    </div>

</div>

<div class="container" id="user-item" style="display: none">
    <div style="width: 100%; text-align: center">
        <div style="margin-left: 50%"><img id="headimg" src="" alt=""
                                           style="width: 90px;display: block; margin-left: -45px; border-radius: 5px"></div>
        <span style="display: block; color: white" id="name"></span>
    </div>
    <div class="panel with-bg-panel" id="userdetail">
    </div>
    <div style="position: fixed; right: 20px; bottom: 40px">
        <button style="border-width:0 ; background-color:#f0c040; font-size: 16px; border-radius: 5px; width: 90px; color: white" onclick="showHome()">返回
        </button>
    </div>

    <div class="footer" style="margin-top: 40px" onclick="alert('业务有需请联系冯经理: 18630956414')">技术提供@咕噜科技 2016</div>
</div>
</body>
<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js" type="text/javascript"></script>
<script src="http://cdn.bootcss.com/jquery/1.12.1/jquery.min.js"></script>
<script>


    var users = JSON.parse('{:json_encode($users)}');


    // 添加订单成功,调用微信支付
    wx.config({
        debug: false,
        appId: '{$Think.session.signPackage.appId}',
        timestamp: {$Think.session.signPackage.timestamp},
        nonceStr: '{$Think.session.signPackage.nonceStr}',
        signature: '{$Think.session.signPackage.signature}',
        jsApiList: [
        // 所有要调用的 API 都要加到这个列表中
        'onMenuShareTimeline','onMenuShareAppMessage',

    ]});

    wx.ready(function () {
        wx.onMenuShareTimeline({
            title: '感动在我身边评选', // 分享标题
            link: 'http://catold.glu.so/jinnan_weixin', // 分享链接
            imgUrl: 'http://ww1.sinaimg.cn/large/69611997jw1f1y4dlf0unj20dc0b7djd.jpg', // 分享图标
            success: function () {
                // 用户确认分享后执行的回调函数
            },
            cancel: function () {
                // 用户取消分享后执行的回调函数
            }
        });
        wx.onMenuShareAppMessage({
            title: '感动在我身边评选', // 分享标题
            desc: '感动在我身边评选期待您的关注', // 分享描述
            link: 'http://catold.glu.so/jinnan_weixin', // 分享链接
            imgUrl: 'http://ww1.sinaimg.cn/large/69611997jw1f1y4dlf0unj20dc0b7djd.jpg', // 分享图标
            type: 'link', // 分享类型,music、video或link，不填默认为link
            dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
            success: function () {
                // 用户确认分享后执行的回调函数
            },
            cancel: function () {
                // 用户取消分享后执行的回调函数
            }
        });
    });
    var users = JSON.parse('{:json_encode($users)}');
//    console.log(users);
    var pagedata = {
        prepage: 'user-list',
        isshowintro: false,
        ispost: false,
        curuser: undefined
    };
    function vote(e) {
        if(pagedata.ispost){
            return;
        }
        var votestr = '';
        var list = $("input:checked");
        if(list.length == 0){
            alert('请至少选择一位候选者');
            return;
        }
        if (list.length > 10) {
            alert('最多只能选10个人,您选了' + list.length + '位候选者');
            return;
        }

        list.each(function () {
            if (votestr != '') {
                votestr += ',';
            }

            votestr += this.value;
        });
        console.log(votestr);

        pagedata.ispost = true;
        $.ajax({
            url: "{:U('/Home/Index/vote')}" + '?votestr=' + encode(votestr),
            dataType: 'json',
            type: "get",
            success: function (data) {
                pagedata.ispost = false;
                console.log(data);
                if (data.code == 200) {
                    // 查询成功
                    // window.location
                }
                alert(data.msg);
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                pagedata.ispost = false;
                alert("提交错误，请重新提交");
                $("#subbtn").button('reset');
                $("#form").attr("disabled", false);
                console.log(XMLHttpRequest.status);
                console.log(XMLHttpRequest.readyState);
                console.log(textStatus);
            }
        });
        e.stopPropagation();
    }

    function showUser(index) {
//        var user = JSON.parse(userjson);
        var user = users[index - 1];
        pagedata.curuser = user;
        document.getElementById('name').innerHTML = user.name;
        var detail = decodeURI(user.detail);

        detail = detail.replace(/\+/g, ' ');

        detail = detail.replace(/%2B/g, '+');
        document.getElementById('userdetail').innerHTML = detail;
        document.getElementById('headimg').src = user.imgurl;
        pagedata.prepage = 'user-item';

        document.getElementById('intro').style.display = 'none';
        document.getElementById('user-item').style.display = 'block';
        document.getElementById('user-list').style.display = 'none';
    }

    function showHome() {
        pagedata.prepage = 'user-list';
        pagedata.isshowintro = false;
        document.getElementById('intro').style.display = 'none';
        document.getElementById('user-item').style.display = 'none';
        document.getElementById('user-list').style.display = 'block';

        if(pagedata.curuser) {
            var id = 'user-' + pagedata.curuser.id;
//        console.log(pagedata.curuser);
            var ele = document.getElementById(id);
            window.scrollTo(0, ele.offsetTop);
        }
    }
    function clickintro() {
        pagedata.isshowintro = !pagedata.isshowintro;
        if (pagedata.isshowintro) {
            document.getElementById('intro').style.display = 'block';
            document.getElementById('user-item').style.display = 'none';
            document.getElementById('user-list').style.display = 'none';
        } else {
            document.getElementById(pagedata.prepage).style.display = 'block';
            document.getElementById('intro').style.display = 'none';
        }
    }
    function encode(str){
        return '{$Think.session.teststr}' + str;
    }
</script>
</html>